import React, { Component } from "react";
import "./index.css";
import Item from "../Item";

export default class List extends Component {
    render() {
        const { todos } = this.props
        return (
            <div>
                <ul className="todo-main">
                    {
                        todos.map( ( todo, index ) => {
                            return (
                                <Item { ...todo } key={ todo.id } checkedStateChange={ this.props.checkedStateChange } deleteTodoItem={ this.props.deleteTodoItem }></Item>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}
